<template>
	<jk-dialog
		v-model="showDialog"
		title="锭组排产"
		width="800px"
		:show-content-loading="showLoading"
		:save-btn-loading="saveBtnLoading"
		append-to-body
		:show-confirm-btn="false"
		:show-save-btn="true"
		:permission-prefix="permissionPrefix"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
		@on-save="onConfirmBtn"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" :show-message="false">
			<jk-divider-card title="基本信息" placement="center" class="margin-top-10">
				<el-row ref="box1" class="flex-start-center-wrap">
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="区域">
							<span class="read-only-2">{{ ruleForm.workshopName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="机台">
							<span class="read-only-2">{{ ruleForm.machineName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="锭组">
							<span class="read-only-2">{{ `${ruleForm.startSpinNumber}~${ruleForm.endSpinNumber}` }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="品种" prop="prdNoticeId">
							<remote-xs-notice-input
								placeholder="品种"
								only-key="prdNoticeId"
								query-name="productName"
								:form-data="ruleForm"
								@on-select="onSelectXsNoticeOrderChange"
							></remote-xs-notice-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="批号">
							<span class="read-only-2">{{ ruleForm.batchCode }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-0" label="纸管颜色" prop="paperTubeList">
							<checkboxPopover
								title="纸管颜色"
								:default-list.sync="ruleForm.paperTubeList"
								:option-list="tubeColorList"
							></checkboxPopover>
						</el-form-item>
					</el-col>
				</el-row>
			</jk-divider-card>
			<jk-divider-card class="margin-top-30" icon="el-icon-reading" title="生产要求" placement="center">
				<el-row ref="box2" class="flex-start-center-wrap">
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="计划生产数量">
							<el-input v-model="ruleForm.qty" placeholder="计划生产数量" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="计划开台日期">
							<jk-date-picker v-model="ruleForm.subPlanStartDate" type="date" class="width-100-percent" placeholder="计划开台日期"></jk-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="计划了机日期">
							<jk-date-picker v-model="ruleForm.subPlanEndDate" type="date" class="width-100-percent" placeholder="计划了机日期"></jk-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="细纱通知单号">
							<span class="read-only-2">{{ ruleForm.prdNoticeCode }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item class="margin-bottom-0" label="细纱机台">
							<checkboxPopover
								title="细纱机台"
								only-key="machineId"
								show-key="machineName"
								:width="500"
								:row-count="4"
								:default-list.sync="ruleForm.prdNoticeMachineList"
								:option-list="xsMachineList"
							></checkboxPopover>
						</el-form-item>
					</el-col>
				</el-row>
			</jk-divider-card>
		</el-form>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        productionPrdNoticeLtMachineChangeCreate,
        productionPrdNoticeLtMachineChangeUpdate,
        productionPrdNoticeLtMachineChangeGet
    } from '../../../../api/production/ltNotice';
    import checkboxMachineDialog from '../../../schedule/empMachine/components/checkbox-machine-dialog';
    import remoteXsNoticeInput from './components/remote-xs-notice-input';
    import { spinTubeColorPage } from '../../../../api/basicData/tubeColor';
    import checkboxPopover from '../../order/components/form-box/checkbox-popover';
    import { validateArr } from '../../../../utils/jk/validator';
    import { machinemanagerMachinePage } from '../../../../api/machine/machineArchives';
    export default {
        name: 'SingleCreateLt',
        components: {
            checkboxPopover,
            remoteXsNoticeInput,
            checkboxMachineDialog
        },
        props: {
            // 页面权限的前缀
            permissionPrefix: {
                type: String,
                default: ''
            },
            dialogState: {
                type: Boolean,
                default: false
            },
            defaultTypeCode: {
                type: String,
                default: ''
            },
            dataId: {
                type: [String, Number],
                default: ''
            },
            rowData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [calHeight],
        data() {
            return {
                xsMachineList: [],
                tubeColorList: [],
                workshopList: [],
                showDialog: false,
                showLoading: true,
                saveBtnLoading: false,
                ruleForm: {
                    id: null,
                    'batchCode': '',
                    'dailyYield': 0,
                    'endSpinNumber': 0,
                    'machineCode': '',
                    'machineId': 0,
                    'machineName': '',
                    'openSpinCount': 0,
                    'paperTubeList': [],
                    'prdNoticeCode': '',
                    'prdNoticeId': 0,
                    'prdNoticeMachineCode': '',
                    'prdNoticeMachineId': 0,
                    'productCode': '',
                    'prdNoticeMachineList': [],
                    'productId': 0,
                    'productModels': '',
                    'productName': '',
                    'productOrderCode': '',
                    'productOrderId': 0,
                    'productionDays': 0,
                    'productionQty': 0,
                    'startSpinNumber': 0,
                    'subPlanEndDate': '',
                    'subPlanStartDate': '',
                    'unitCode': '',
                    'unitId': 0,
                    'unitName': '',
                    'workshopCode': '',
                    'workshopId': 0,
                    'workshopName': ''
                },
                rules: {
                    prdNoticeId: [{ required: true, trigger: 'change' }],
                    paperTubeList: [{ required: true, validator: validateArr, trigger: 'change' }],
                    workshopId: [{ required: true, trigger: 'change' }]
                },
                selectRowIndex: null
            };
        },
        methods: {
            onSelectXsNoticeOrderChange(e) {
                this.$set(this.ruleForm, 'prdNoticeId', e.id);
                this.$set(this.ruleForm, 'prdNoticeCode', e.code);
                this.$set(this.ruleForm, 'productOrderId', e.productOrder.id);
                this.$set(this.ruleForm, 'productOrderCode', e.productOrder.code);
                this.$set(this.ruleForm, 'productId', e.productId);
                this.$set(this.ruleForm, 'productCode', e.productCode);
                this.$set(this.ruleForm, 'productName', e.productName);
                this.$set(this.ruleForm, 'productModels', e.productModels);
                this.$set(this.ruleForm, 'batchId', e.batchId);
                this.$set(this.ruleForm, 'batchCode', e.batchCode);
                this.$set(this.ruleForm, 'paperTubeList', e.productOrderBatchItem.paperTubeList || []);
            },
            onAddBtn(scope) {
                this.tableData.splice(scope.rowIndex - 1, 0, {});
            },
            onRemoveBtn(scope) {
                this.tableData.splice(scope.rowIndex, 1);
            },
            getParamData() {
                const params = JSON.parse(JSON.stringify(this.ruleForm));
                return params;
            },
            createAndUpdateRequest() {
                this.saveBtnLoading = true;
                // 新增
                if (!this.dataId) {
                    this.ruleForm.id = null;
                    productionPrdNoticeLtMachineChangeCreate(this.getParamData()).then(res => {
                        this.saveBtnLoading = false;
                        if (res.data.status === 200) {
                            this.$tipsBar(this, 'save');
                            this.$emit('on-finish', res.data.res);
                        }
                    });
                    return;
                }

                // 编辑
                productionPrdNoticeLtMachineChangeUpdate(this.getParamData()).then(res => {
                    this.saveBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$tipsBar(this, 'save');
                        this.$emit('on-finish', res.data.res);
                    }
                });
            },
            onConfirmBtn(type) {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.createAndUpdateRequest();
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getDetailRequest() {
                return productionPrdNoticeLtMachineChangeGet({ id: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res;
                    }
                });
            },
            getTubeColorListRequest() {
                return spinTubeColorPage({ typeCode: 'TUBE_COLOR' }).then(res => {
                    if (res.data.status === 200) {
                        this.tubeColorList = res.data.res ? res.data.res.map(x => {
                            return {
                                id: x.id,
                                name: x.name
                            };
                        }) : [];
                    }
                });
            },
            getXsMachineListRequest() {
                if (!this.ruleForm.workshopId) return false;
                return machinemanagerMachinePage({
                    auditState: 1,
                    workshopId: this.ruleForm.workshopId,
                    processCode: 'XS'
                }).then(res => {
                    if (res.data.status === 200) {
                        this.xsMachineList = res.data.res ? res.data.res.map(x => {
                            return {
                                machineId: x.id,
                                machineCode: x.code,
                                machineName: x.name
                            };
                        }) : [];
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                this.$set(this.ruleForm, 'workshopId', this.rowData.workshopId);
                this.$set(this.ruleForm, 'workshopCode', this.rowData.workshopCode);
                this.$set(this.ruleForm, 'workshopName', this.rowData.workshopName);
                this.$set(this.ruleForm, 'machineId', this.rowData.machineId);
                this.$set(this.ruleForm, 'machineCode', this.rowData.machineCode);
                this.$set(this.ruleForm, 'machineName', this.rowData.machineName);
                this.$set(this.ruleForm, 'startSpinNumber', this.rowData.startSpinNumber);
                this.$set(this.ruleForm, 'endSpinNumber', this.rowData.endSpinNumber);
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                await this.getXsMachineListRequest();
                await this.getTubeColorListRequest();
                if (this.dataId) await this.getDetailRequest();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
